<!DOCTYPE html>
<html lang="en">
<head><script language="javascript">
        alert("欢迎来到魅力广东！")
    </script>
    <meta charset="UTF-8">
  
    <title>page10</title>

    <style type="text/css" media="screen">
    *{margin: 0; padding: 0;font-size: 12px;
    }
  
li {margin-left: 10px;display: inline-block;/*水平放置*/line-height: 40px;/*字体离大框架上边的高度*/min-width:120px;/*两者间的距离*/list-style-type: none;}/*定义了所有li全部为水平*/
    
        #Z1
        {
            width: 50%;
            height: 300px;
            margin-left: 15.5%;
            margin-top: 10px;
           
            min-width: 500px;
            min-height: 350px;
        }

   #box{
        width: 380px;
        margin: 3px auto;
        font-size: 14px;

    }
    #box a{

        text-decoration: none;
        color: red;

    }
    #b{
            width: 350px;
    height: 500px;
    margin-left:100px;
    border:3px double rgba(153, 153, 102, 0.3); 
    float: left;
    margin-top: 120px;

    }
     #c{
    width: 980px;
    height: 500px;
    margin-left:2px;
    border:3px double rgba(153, 153, 102, 0.3); 
    float: left;
    text-align: center;
    margin-top: 120px;
    
    }
     #d{
            width: 350px;
    height: 500px;
    margin-left:100px;
    border:3px double rgba(153, 153, 102, 0.3); 
    float: left;
    margin-top: 120px;

    }

    #a
        {height: 600px;
            width:85%;
            left: 20px;
            margin-left: 10%;
            top: 500px;
            background-color: white;
            min-height: ;
            min-width: ;
            float: left;
            text-align: left;
            border-radius: 100px;

        }
    input{margin-top: 50px;
        width: 260px;
        border: 1px solid #e2e2e2;
        height: 30px;
        float: left;
        background-repeat: no-repeat;
          background-image: url('images/search.jpg');
        background-size: 25px;
        background-position:5px center;
        padding:0 0 0 40px;
    }

    #frame {
            position: absolute; 
            width: 1350px;
            height: 700px;  
            overflow: hidden;  
            border-radius:15px;  
        }  

        #photos img {  
            float: left;  
            width:500px;
            height:500px;  
        }  
        #photos {/*---设置总的图片宽度--通过位移来达到轮播效果----*/  
            position: absolute;z-index:9px;  
            width: calc(1350px * 5);/*---修改图片数量的话需要修改下面的动画参数*/  
        }  
        .play{  
            animation: ma 20s ease-out infinite alternate;/**/  
        }  
        @keyframes ma {/*---每图片切换有两个阶段：位移切换和静置。中间的效果可以任意定制----*/  
            0%,20% {        margin-left: 0px;       }  
            25%,40% {       margin-left: -1350px;  }  
            45%,60% {       margin-left: -2700px;}  
            65%,80% {       margin-left: -4050px;   }  
            85%,100% {      margin-left: -5400px;   }  
        }  
        .num{  
            position:absolute;z-index:10;  
            display:inline-block;  
            right:10px;top:650px;  
            border-radius:100%;  
            background:#026668;  
            width:25px;height:25px;  
            line-height:25px;  
            cursor:pointer;  
            color:black;  
            text-align:center;  
            opacity:0.8;  
        }  
        .num:hover{background:#00f;}  
        .num:hover,#photos:hover{animation-play-state:paused;}  
        .num:nth-child(2){margin-right:30px}  
        .num:nth-child(3){margin-right:60px}  
        .num:nth-child(4){margin-right:90px}  
        .num:nth-child(5){margin-right:120px}  
        #a1:hover ~ #photos{animation: ma1 .3s ease-out forwards;}  
        #a2:hover ~ #photos{animation: ma2 .3s ease-out forwards;}  
        #a3:hover ~ #photos{animation: ma3 .3s ease-out forwards;}  
        #a4:hover ~ #photos{animation: ma4 .3s ease-out forwards;}  
        #a5:hover ~ #photos {animation: ma5 .3s ease-out forwards;}  
        @keyframes ma1 {0%{margin-left:-1200px;}100%{margin-left:-0px;} }  
        @keyframes ma2 {0%{margin-left:-1200px;}100%{margin-left:-1350px;}   }  
        @keyframes ma3 {100%{margin-left:-2700px;}   }  
        @keyframes ma4 {100%{margin-left:-4050px;}   }  
        @keyframes ma5 {100%{margin-left:-5400px;}  }  
  .brightness {
    -webkit-filter: brightness(80%);
    filter: brightness(80%);
}


#b:hover  { transform: skew(0deg,15deg) rotate(-45deg);


                }
#d:hover{
    transform: skew(0deg,15deg) rotate(-45deg);
}

    aside
    {height: 200px;
        width:100%;
        background-color: white;
        float: left;
    }
    article
    {height: 600px;
        width: 100%;
        background-color: white;
        float: left;}

      c{
        font-size: 36px;
  color: #f06;
}
*{
            text-decoration:none;
    </style>

</head>
        <body onLoad="chColor()">
    <div id="txt"></div>
    </body>
     </body>

    <aside id="K">
       <a href="https://baike.so.com/doc/2671265-2820914.html"> <c>广东省</c></a>，以岭南东道、广南东路得名，简称“粤”，省会广州，是中国大陆南端沿海的一个省份，位于南岭以南，南海之滨，与香港、澳门、广西、湖南、江西和福建接壤，与海南隔海相望，划分为珠三角、粤东、粤西和粤北四个区域，下辖21个地级市（其中副省级城市2个），119个县级行政区（60个市辖区、20个县级市、36个县、3个自治县）。
       <br>广东作为一个外来人口非常多的南方沿海城市，虽然之前被称为“蛮夷之地”，但现今的发展已经相当不错了，在广东有着令人着迷的<a href="page1.html"><c>景区</c></a>、令人垂涎三尺的<a href="page3.html"><c>小吃<c></a>、令人回味无穷的<a href="page2.html"><c>水果<c></a>......
    </aside>
    <article><div id="Z1">
     <div id="frame" >  
        <a id="a1" class="num">5</a>  
        <a id="a2" class="num">4</a>  
        <a id="a3" class="num">3</a>  
        <a id="a4" class="num">2</a>  
        <a id="a5" class="num">1</a>  
        <div id="photos" class="play">  
              <img src="../img4/1.jpg" >  
              <img src="../img4/3.jpg" >  
              <img src="../img4/6.jpg" >  
              <img src="../img4/8.jpg" >  
              <img src="../img4/5.jpg" >  
                      <a id="a1" class="num">6</a>  
        <a id="a2" class="num">7</a>  
        <a id="a3" class="num">8</a>  
        <a id="a4" class="num">9</a>  
        <a id="a5" class="num">10</a>  
        <div id="photos" class="play">  
              <img src="../img4/9.jpg" >  
              <img src="../img4/2.jpg" >  
              <img src="../img4/10.jpg" >  
              <img src="../img4/4.jpg" >  
              <img src="../img4/7.jpg" >  

        </div>     
    </div>
</article>

</html>